<template>
  <div class="outCompoent">
    <!-- <el-button type="mini" size="default" @click="stopAnimation">停止闪烁</el-button> -->
    <!-- {{ this.$store.state.Mystore.is_firstLoad }} -->
    <div id="map" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>

import {
  seriousDevice,
  opInfoQueryBatch

} from "@/api/index";
import { settings } from "nprogress";

export default {
  // computed:{
  //   is_firstLoad:{
  //     get(){
  //     return this.$store.state.Mystore.is_firstLoad;
  //   }
  //   }
  // },


  // props: {
  //   message: {
  //     type: Boolean,
  //     required: false,
  //   },
  // },
  data() {
    return {
      map: undefined,
      psrmap: undefined,
      // is_firstLoad:true,
      flashArray: [],
      sDparams: {
        // 设备类型 1312-主变, 0408-馈线
        devType: "1312",
      },
      // powerManageGridMap:null,
    };
  },

  created() {
    this.is_firstLoad = this.message
    // alert(this.is_firstLoad)
    this.useMyseriousDevice()
  },
  methods: {
    daying() {
      console.log('调用子组件的方法222');
    },

    // 全天最严重设备
    useMyseriousDevice() {
      // 接口部分
      seriousDevice(this.sDparams).then(res => {
        if (res.code !== 200) return
        console.log(res.data, '看一眼返回值');
        let myArray = []
        res.data.forEach(it => {
          myArray.push(it.gs_id)
        });

        let Params =
        {
          "classify": "02",
          "deviceType": "zf01",
          "deviceIdList": myArray
        }

        // console.log(myArray,"看op互联的返回值");
        opInfoQueryBatch(Params).then(res => {
          if (res.code !== 200) return
          let newAarray = []
          res.data.forEach(it => {
            newAarray.push(it.psrId)
          })
          this.flashArray = newAarray
        })
      })



    },

    changeDiqvID() {
      let periD = sessionStorage.getItem("DEVID");
      let ids = [
        {
          devId: periD,
          devType: sessionStorage.getItem('op_deviceType'),
          distribution: 1,
        },
      ];
      console.log(ids, '看ids')

      this.psrmap.flyToDevices(ids, {
        heightlight: true,
        color: "#FFFF00",
      });

      // alert('世界')
    },
    ceshiMethods() {
      alert("世界你好");
    },
    useParent() {
      this.$emit("ChildData", "Hello from child");
      // console.log(this.message , '看数据');
      // alert(this.message)
      // this.parentMethod()
    },
    initMap(styleurl) {
      this.map && this.map.remove();
      this.map = new narimap.Map({
        // 地图绑定的DOM元素ID
        container: "map",
        // 地图样式
        style: styleurl,
        // 默认缩放层级
        zoom: 11,
        // 地图中心点
        center: [118.77793441984215, 32.05395134816371], // [119.45259089995932, 32.93433342834534],
        // 地图默认字体
        localIdeographFontFamily: "Microsoft YoHei",
        fullExtent: narimap.Config.examples.fullExtent,
      });
      this.map.on("load", () => {

        // setTimeout(() => {
        //   this.flashDevice()
        //   setTimeout(() => {
        //     this.heightlightDevice()
        //   }, 4000);
        // }, 2000);



        //添加电网图层
        this.psrmap = new narimap.PSRMap(this.map, {
          orgId: 'ff8080814a616f0f014b38b062e0050e'
        });
        // this.psrmap = new narimap.PSRMap(this.map, option);
        this.psrmap.addPSR();
        //添加电网要素点击事件
        this.psrmap.on("click", (features) => {
          //  console.log(features, features.grid.orgId  , '999999999');
        });
        this.psrmap.on("load", () => {

          var query; // 这边就是搜索框的代码
          query = new WebGIS.Components.Query(this.map);
          query.init(this.map.getContainer());
          const queryBox = this.$el.querySelector("#queryBoxWrap");
          queryBox.style.left = "80px";
          if (!window.__POWERED_BY_WUJIE__) {
            queryBox.style.left = "300px";
            queryBox.style.top = "12px";
          }
          // 设置省份的机构ID（本示例为江苏）
          // 在总部环境下如果不设置无法查询配网数据
          query.setQueryOrgId("ff8080814a616f0f014b38b062e0050e");
          query.on("poi-item-click", (eventName, data) => {
            console.log("POI点击事件", data);
          });
          query.on("res-item-click", (eventName, data) => {
            console.log("设备点击事件", data);
          });

          setTimeout(() => {
          this.flashDevice()

          setTimeout(() => {
            this.heightlightDevice()
          }, 8000);
          }, 2000);

        });
      });
      this.map.once("load", () => {
        //  this.startAnimation() // 试试在方法里面调用

        this.powerManageGridMap = new narimap.ManageGrid.PowerManageGridMap(this.map);
        this.powerManageGridMap.init(
          {
            theme: "light",
            levels: {
              province: {
                enable: false,
              },
              city: {
                minzoom: 5,
                maxzoom: 24,
                outline: {
                  paint: {
                    "line-color": "#07b9a1",
                    "line-width": 2,
                  },
                },
                fill: {
                  paint: {
                    "fill-color": "rgb(134,134,133)",
                    "fill-opacity": 0.24,
                  },
                },
                highLight: {
                  type: "all",
                  fill: {
                    paint: {
                      "fill-color": "#3b6d5f",
                      "fill-opacity": 0.2,
                    },
                  },
                  outline: {
                    paint: {
                      "line-color": "#07b9a1",
                      "line-width": 5,
                    },
                  },
                },
                hover: {
                  enable: true,
                  type: "all",
                  fill: {
                    enable: false,
                    paint: {
                      "fill-color": "#3b6d5f",
                      "fill-opacity": 0.2,
                    },
                  },
                  outline: {
                    enable: true,
                    paint: {
                      "line-color": "#07b9a1",
                      "line-width": 4,
                    },
                  },
                },
              },
              //乡镇级别不显示
              country: {
                enable: false,
              },
              //班组级别不显示
              depart: {
                enable: false,
              },
            },
          },
          {
            initOrgIds: ["ff8080814a616f0f014b38b062e0050e"],
            //是否联级，包含下属全部子部门，即同样显示编码对应的所属下级
            theme: "admin_background",
            cascade: true,
          }
        );

        this.powerManageGridMap.on("click", function (e) {
          console.log(e);
          console.log(this, "ddddd");
          this.highLight([e.grid.orgId]);
        });

      });

      this.map.on("click", (val) => {
        console.log(val, "click点击后看一眼val的值");
      });
    },

    initMymap() {
      this.$nextTick(() => {
        var that = this;
        narimap.Require(
          [
            "PSRMap",
            "components.Query",
            "components.ThematicLayerCtl",
            "Thematic",
          ],
          () => {
            if (narimap) {
              narimap.Config.styles.sjBase =
                "aegis://styles/aegis/StreetsLight-v2"; // 修改了地图的风格
            }
            if (narimap.Config.examples.notlogin) {
              //默认打开暗色系地图
              alert("世界1");
              that.initMap(narimap.Config.styles.base);
            } else {
              console.log(narimap.Config, "看地图");

              //电网GIS地图服务登录
              narimap.SGAuth.login()
                .then(function (result) {
                  // alert('渲染了地图')

                  if (result.success) {
                    console.log("登录成功");
                  } else {
                    console.log("登录失败", result);
                  }
                  //默认打开暗色系地图
                  that.initMap(narimap.Config.styles.sjBase);
                  const div1 = that.$el.querySelector(
                    ".sgmap-ctrl-bottom-left"
                  );
                  const div2 = that.$el.querySelector(
                    ".sgmap-ctrl-bottom-right"
                  );
                  div1.style.display = "none"; //隐藏地图左下组件
                  div2.style.display = "none"; //隐藏地图右下组件
                })
                .catch((err) => {
                  console.log("错误", err);
                });
            }
          }
        );
      }
      );
    },


    destoryMap() {
      // alert('销毁地图')
      if (!this.map) return
      this.map.remove();
      this.map = null;
      // alert('地图已经销毁')
    },

    // 让设备高亮
    heightlightDevice() {
      this.psrmap.highlightDevices(this.flashArray, {
        color: 'yellow',
        otherColor: '',
      })
    },

    // 让设备闪烁
    flashDevice() {
      console.log('开始闪烁');

      this.psrmap.highlightDevices(this.flashArray, {
        color: "yellow", flash: {
          mode: "opacity",
          times: 0,
          speed: 1,
          minopacity: 0,
          reverseColor: "yellow",
        }
      });


    },

    stopFlash() {
      this.psrmap.clearHighlight()
    }

  },
  mounted() {
    // 电网一张图
    console.log("gis电网一张图")
    this.initMymap();
  },
  // beforeDestroy(){
  //   this.destoryMap()

  // },


};
</script>

<style lang="scss" scoped>
.outCompoent {
  width: 100%;
  height: 100%;

  // background-color: red;

  .titleBox {}
}
</style>
